<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="generator" content="Hugo 0.88.1">
    <title>名字全称拼写</title>

    <link href="https://getbootstrap.com/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <style>
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }
    </style>
  </head>
  <body>

    <header onClick="toHome()">
      <div class="navbar navbar-dark bg-dark shadow-sm">
        <div class="container">
          <a href="#" class="navbar-brand d-flex align-items-center">
            <strong>获取完整姓名</strong>
          </a>
        </div>
      </div>
    </header>
    <main>
      <section class="py-5 container">
        <div class="row py-lg-5">
          <div class="col-lg-6 col-md-8 mx-auto">
              <form method="post" action="/submit_name">
                  <div class="mb-4">
                    <label for="firstName" class="form-label">First name</label>
                    <input type="text" class="form-control" id="firstName" name="firstName" required="" value="{{first_name}}">
                    <div class="invalid-feedback">
                      有效的名字是必需的.
                    </div>
                  </div>
                  <div class="mb-4">
                      <label for="lastName" class="form-label">Last name</label>
                      <input type="text" class="form-control" id="lastName" name="lastName" required="" value="{{last_name}}">
                      <div class="invalid-feedback">
                        需要有效的姓氏.
                      </div>
                  </div>
                  <button type="submit" class="btn btn-primary">提交</button>
                  {% if full_name %}
                    <div class="mb-4" style="margin-top: 20px">
                      姓名：
                      <span style="color:blue;">{{full_name}}</span>
                  </div>
                  {% endif %}
              </form>
          </div>
        </div>
      </section>
    </main>
    <script src="/static/js/bootstrap.js"></script>
    <script>
      function toHome(){
        window.location.href = '/'
      }
    </script>
  </body>
</html>
